Clipboard API
GPT-4.icon
基本的な機能
読み取り
クリップボードからテキストを読み取ります。
read()
リッチテキストや画像などの複数形式を読み取ることができます(非テキストデータも扱える)。
書き込み
指定したテキストをクリップボードに書き込みます。
write()
リッチテキストや画像などの複数形式をクリップボードに書き込むことができます。
使用例
クリップボードにテキストを書き込む
code:js
navigator.clipboard.writeText('Hello, World!')
.then(() => {
console.log('Text copied to clipboard');
})
.catch(err => {
console.error('Failed to copy text: ', err);
});
クリップボードからテキストを読み取る
code:js
navigator.clipboard.readText()
.then(text => {
console.log('Text read from clipboard: ', text);
})
.catch(err => {
console.error('Failed to read text: ', err);
});
write()およびread()メソッドを使用することで、リッチテキストや画像などの複数形式のデータをクリップボードに対して操作することができます。
リッチコンテンツの書き込み
code:js
const clipboardItem = new ClipboardItem({ 'text/html': blob });
.then(() => {
console.log('Rich content copied to clipboard');
})
.catch(err => {
console.error('Failed to copy rich content: ', err);
});
リッチコンテンツの読み取り
code:js
navigator.clipboard.read()
.then(items => {
for (const item of items) {
for (const type of item.types) {
item.getType(type).then(blob => {
blob.text().then(text => {
console.log('Rich content read from clipboard: ', text);
});
});
}
}
})
.catch(err => {
console.error('Failed to read rich content: ', err);
});
セキュリティと権限
- **HTTPS:** Clipboard APIは、HTTPS環境でのみ動作します。
- **ユーザー操作:** クリップボードの読み取りおよび書き込みは、ユーザーの操作(クリックやキー押下など)に反応して行われる必要があります。これにより、不正なスクリプトがユーザーのクリップボードにアクセスすることを防ぎます。
- **パーミッション:** 一部のブラウザでは、クリップボードへのアクセスを試みる際にユーザーに許可を求める場合があります。
Reactでの使用例
こんな感じで書けば、テキストを選択肢してcmd-cしたら発火する
わざわざ「cmd-c」みたいな明示的なショートカットキーを書かなくていい
code:ts
useEffect(() => {
const handleCopy = event => {
// Get the selected text
const selectedText = window.getSelection().toString();
alert(selectedText);
if (selectedText) {
// Use Clipboard API to copy the selected text
navigator.clipboard
.writeText(selectedText)
.then(() => {
console.log('Text copied to clipboard');
})
.catch(err => {
console.error('Failed to copy text: ', err);
});
}
};
document.addEventListener('copy', handleCopy);
return () => {
document.removeEventListener('copy', handleCopy);
};
}, []);